<template>
	<div class="system-add-dept-container">
		<el-drawer title="修改系统参数表" v-model="state.showWindows" @close="onCancel">
			<el-form ref="formRef" :model="state.sysParams" :rules="state.rules" size="small" label-width="30%" style="width: 90%">
				<el-form-item label="参数名称" prop="paramName">
					<el-input v-model="state.sysParams.paramName" placeholder="请输入参数名称" />
				</el-form-item>
				<el-form-item label="参数的key" prop="paramKey">
					<el-input v-model="state.sysParams.paramKey" placeholder="请输入参数的key" />
				</el-form-item>
				<el-form-item label="参数值类型" prop="valueType">
					<el-select v-model="state.sysParams.valueType" placeholder="参数值类型" style="width: 100%">
						<el-option label="文本" :value="1" />
						<el-option label="图片" :value="2" />
						<el-option label="链接" :value="3" />
					</el-select>
				</el-form-item>
				<el-form-item label="参数的值" prop="paramValue">
					<el-input v-if="state.sysParams.valueType == 1" v-model="state.sysParams.paramValue" placeholder="请输入参数的值" />
					<SingleUpload v-else-if="state.sysParams.valueType == 2" @setImageUrl="setImageUrl" :imageUrl="state.sysParams.paramValue" />
					<el-input v-else placeholder="请输入参数的值" v-model="state.sysParams.paramValue">
						<template #prepend>
							<el-select placeholder="Select" style="width: 110px">
								<el-option label="http://" value="http://" />
								<el-option label="https://" value="https://" />
							</el-select>
						</template>
					</el-input>
				</el-form-item>
        <el-form-item label="是否平台" prop="mandatory">
          <el-switch v-model="state.sysParams.platform"></el-switch>
        </el-form-item>
				<el-form-item label="是否必选" prop="mandatory">
					<el-switch v-model="state.sysParams.mandatory"></el-switch>
				</el-form-item>
				<el-form-item label="是否只读" prop="readonly">
					<el-switch v-model="state.sysParams.readonly"></el-switch>
				</el-form-item>
			</el-form>
			<div class="el-drawer__footer">
				<el-button @click="onCancel" size="small">取 消</el-button>
				<el-button type="primary" @click="onSubmit" size="small">确 定</el-button>
			</div>
		</el-drawer>
	</div>
</template>

<script lang="ts" setup>
import {defineEmits, defineExpose, reactive, ref} from 'vue';
import { editSysParams, getSysParamsInfo } from '/@/api/sys/param/index';
import { ElMessage } from 'element-plus';
import SingleUpload from '/@/components/uploadImage/singleUpload.vue';

const formRef = ref();
const emit = defineEmits(['initTableData']);

const state = reactive({
	showWindows: false,
	sysParams: {
    paramId:'',
		paramName: '',
		paramKey: '',
		valueType: 0,
		paramValue: '',
		mandatory: false,
		readonly: false,
    platform: false,
	},
	paramId: '',
	rules: {
		paramName: [{ required: true, message: '请输入参数名称', trigger: 'blue' }],
		paramKey: [{ required: true, message: '请输入参数的key', trigger: 'blue' }],
		paramValue: [{ required: true, message: '请输入参数的value', trigger: 'blue' }],
		platform: [{ required: true, message: '请输入是否是平台参数', trigger: 'blue' }],
	},
});

//打开添加窗口
const openWindows = (paramId: any) => {
	state.paramId = paramId;
	getSysParamsInfo(paramId).then((res: any) => {
		state.sysParams = res.data;
	});
	state.showWindows = true;
};

//取消
const onCancel = () => {
	formRef.value.resetFields();
	state.showWindows = false;
};

//提交
const onSubmit = () => {
	formRef.value.validate((valid: any) => {
		if (valid) {
      state.sysParams.paramId = state.paramId
			editSysParams(state.sysParams, state.paramId).then((res: any) => {
				if (res.code == 200) {
					onCancel();
					emit('initTableData');
				} else {
					ElMessage.error(res.message);
				}
			});
		}
	});
};

const setImageUrl = (imageUrl: any) => {
	state.sysParams.paramValue = imageUrl;
};

defineExpose({
  openWindows,
});
</script>

<style scoped>
.cropper-img {
	margin: auto;
	width: 100px;
	height: 100px;
	border-radius: 100%;
}
</style>
